1import {useState, useMemo, PropsWithChildren} from 'react';
 2import EventLayout, { TabComponent } from '../../../layouts/Event';
 3import {
 4  EventByUuidDocument,
 5} from '../../../generated/graphql';
 6import useProfile from '../../../hooks/useProfile';
 7import WaitingList from '../../../containers/WaitingList';
 8import {AddPassengerToWaitingList} from '../../../containers/NewPassengerDialog';
 9import {initializeApollo} from '../../../lib/apolloClient';
10
11interface NewPassengerDialogContext {
12  addSelf: boolean;
13}
14
15interface Props {
16  eventUUID: string;
17}
18
19const Page = (props: PropsWithChildren<Props>) => {
20  return <EventLayout {...props} Tab={WaitingListTab} />;
21};
22
23const WaitingListTab: TabComponent = (props: {event}) => {
24  const {user} = useProfile();
25  const [addPassengerToWaitingListContext, toggleNewPassengerToWaitingList] =
26    useState<NewPassengerDialogContext | null>(null);
27
28  const canAddSelf = useMemo(() => {
29    if (!user) return false;
30    const isInWaitingList = event?.waitingPassengers?.some(
31      passenger => passenger.user?.id === `${user.id}`
32    );
33    const isInTravel = event?.travels.some(travel =>
34      travel.passengers.some(passenger => passenger.user?.id === `${user.id}`)
35    );
36    return !(isInWaitingList || isInTravel);
37  }, [event, user]);
38
39  return (
40    <>
41      <WaitingList
42        canAddSelf={canAddSelf}
43        getToggleNewPassengerDialogFunction={(addSelf: boolean) => () =>
44          toggleNewPassengerToWaitingList({addSelf})}
45      />
46      {!!addPassengerToWaitingListContext && (
47        <AddPassengerToWaitingList
48          open={!!addPassengerToWaitingListContext}
49          toggle={() => toggleNewPassengerToWaitingList(null)}
50          addSelf={addPassengerToWaitingListContext.addSelf}
51        />
52      )}
53    </>
54  );
55};
56
57export async function getServerSideProps(ctx) {
58  const {uuid} = ctx.query;
59  const apolloClient = initializeApollo();
60  const {data = {}} = await apolloClient.query({
61    query: EventByUuidDocument,
62    variables: {uuid},
63  });
64  const {eventByUUID: event} = data;
65  const {host = ''} = ctx.req.headers;
66
67  return {
68    props: {
69      event,
70      eventUUID: uuid,
71      metas: {
72        title: event?.name || '',
73        url: `https://${host}${ctx.resolvedUrl}`,
74      },
75    },
76  };
77}
78
79export default Page;